<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8" />
	<title>demo show</title>
	<link href="style/default.css" rel="stylesheet" type="text/css">
</head>
<body>
	<!-- 头部 -->
	<div class="header">
		<p class="color-ft0">卡行天下3.0控件</p>
	</div>
	
	<!-- 样板 -->
	<div class="warps">
		
		<!-- 按钮 -->
		<div class="section-kx">
			<!-- 标题 -->
			<div class="title-kx">
				<em>按钮样式</em>
			</div>
			<div class="lay-list-0">
				<ul class="clearfix">
					<li>
						<!-- 正常按钮 -->
						<a href="" class="btn-s btn-w140-s0 btn-bg0">按钮0</a>
						<a href="" class="btn-s btn-w140-s0 btn-bg1">按钮1</a>
						<a href="" class="btn-s btn-w140-s0 btn-bg2">按钮2</a>
						<a href="" class="btn-s btn-w140-s0 btn-bg3">按钮3</a>
						<a href="" class="btn-s btn-w140-s1 btn-bg4 br-b1">按钮4</a>
						<a class="btn-s btn-w140-s0 btn-bg5">按钮5</a>
					</li>
					<li>
						<!-- 带icon按钮 -->
						<a href="" class="btn-s btn-w140-s0 btn-bg0">
							<i class="btn-icon i-wx"></i><em>发送微信</em>
						</a>
						<a href="" class="btn-s btn-w140-s0 btn-bg0">
							<i class="btn-icon i-del"></i><em>删除</em>
						</a>
						<a href="" class="btn-s btn-w140-s0 btn-bg0">
							<i class="btn-icon i-ref"></i><em>刷新页面</em>
						</a>
						<a href="" class="btn-s btn-w140-s0 btn-bg0">
							<i class="btn-icon i-up"></i><em>上传数据</em>
						</a>
						<a href="" class="btn-s btn-w140-s0 btn-bg0">
							<i class="btn-icon i-sur"></i><em>确认提交</em>
						</a>
						<a href="" class="btn-s btn-w140-s0 btn-bg0">
							<i class="btn-icon i-add"></i><em>添加</em>
						</a>
					</li>
					<li>
						<!-- 不同大小按钮 -->
						<a href="" class="btn-s btn-w68-s0 btn-bg0">按钮</a>
						<a href="" class="btn-s btn-w52-s0 btn-bg0">按钮</a>
						<a href="" class="btn-s btn-w37-s0 btn-bg0">按钮</a>
						
						<!-- 下拉按钮 -->
						<div class="pull-btns">
							<a href="" class="pd-btn-s pd-w105-s0 btn-bg0">确认提交</a><i class="btn-pd i-pd"></i>
							<div class="pull-bt">
								<a href="" class="btn-pu btn-w140-s2 btn-bg6">上传数据</a>
								<a href="" class="btn-pu btn-w140-s2 btn-bg6">上传数据</a>
								<a href="" class="btn-pu btn-w140-s2 btn-bg6 pu-last">上传数据</a>
							</div>
						</div>
					</li>
				</ul>
			</div>
			
			
		</div>
		
		<!-- 提示 -->
		<div class="section-kx">
			<!-- 标题 -->
			<div class="title-kx">
				<em>提示</em>
			</div>
			<!-- 提示信息 margin-t20可去掉-->
			<div class="lay-list-0">
				<ul class="clearfix">
					<li>
						<!-- 下定位 pos-bottom -->
						<div class="pos-hint margin-t20">
							<a href="" class="text-p">文字下提示</a>
							<div class="hint-msgs msg-s0 pos-bottom">
								<i></i><em>输入有误请重新输入</em>
							</div>
						</div>
						
						<!-- 右定位 pos-right -->
						<div class="pos-hint margin-t20">
							<a href="javascript:void(0)" class="text-p">文字右提示</a>
							<div class="hint-msgs msg-s1 pos-right">
								<i></i><em>输入有误请重新输入</em>
							</div>
						</div>
						
						<!-- 上定位 pos-top -->
						<div class="pos-hint margin-t20">
							<a href="" class="text-p">文字上提示</a>
							<div class="hint-msgs msg-s1 pos-top">
								<i></i><em>输入有误请重新输入</em>
							</div>
						</div>
					</li>
					<li>
						<!-- 下定位 pos-bottom-h -->
						<div class="pos-hint margin-t20">
							<a href="" class="text-p">文字下提示</a>
							<div class="hint-msgs msg-s2 pos-bottom-h br-rul-bottom">
								<i></i><em>输入有误请重新输入</em>
							</div>
						</div>
						
						<!-- 右定位 pos-right-h -->
						<div class="pos-hint margin-t20">
							<a href="" class="text-p">文字右提示</a>
							<div class="hint-msgs msg-s2 pos-right-h br-rul-right">
								<i></i><em>输入有误请重新输入</em>
							</div>
						</div>
						
						<!-- 上定位 pos-top-h -->
						<div class="pos-hint margin-t20">
							<a href="" class="text-p">文字上提示</a>
							<div class="hint-msgs msg-s2 pos-top-h br-rul-top">
								<i></i><em>输入有误请重新输入</em>
							</div>
						</div>
					</li>
					<li>
						<!-- 下定位 pos-bottom-h -->
						<div class="pos-hint margin-t20">
							<a href="" class="text-p">文字下提示</a>
							<div class="hint-msgs msg-s3 pos-bottom-h br-rul-bottom color-bg3">
								<i></i><em>输入有误请重新输入</em>
							</div>
						</div>
						
						<!-- 右定位 pos-right-h -->
						<div class="pos-hint margin-t20">
							<a href="" class="text-p">文字右提示</a>
							<div class="hint-msgs msg-s3 pos-right-h br-rul-right color-bg3">
								<i></i><em>输入有误请重新输入</em>
							</div>
						</div>
						
						<!-- 上定位 pos-top-h -->
						<div class="pos-hint margin-t20">
							<a href="" class="text-p">文字上提示</a>
							<div class="hint-msgs msg-s3 pos-top-h br-rul-top color-bg3">
								<i></i><em>输入有误请重新输入</em>
							</div>
						</div>
					</li>
				</ul>
			</div>
			
		</div>
		<!-- 文本框 -->
		<div class="section-kx">
			<!-- 标题 -->
			<div class="title-kx">
				<em>文本框</em>
			</div>
			
			<div class="lay-list-0">
				<ul class="clearfix">
					<!-- 输入框 -->
					<li>
						<input type="text" name="" id="" placeholder="" autocomplete="off" class="inp-text"/>
						<input type="text" name="" id="" placeholder="输入提示" autocomplete="off" class="inp-text br-focus"/>
						<input type="text" name="" id="" value="不可修改的输入内容" class="inp-text inp-no" disabled="disabled"/>
					</li>
					<!-- 文本域 -->
					<li>
						<textarea name="" id="" cols="30" rows="7" class="area-ret br-focus" placeholder="输入提示"></textarea>
					</li>
					<!-- 单位框 -->
					<li>
						<div class="inp-numb">
							<input type="text" name="" id="" /><em>¥</em>
						</div>
						<div class="inp-numb">
							<input type="text" name="" id="" /><em>㎏</em>
						</div>
						<div class="inp-numb">
							<input type="text" name="" id="" /><em>m³</em>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<!-- 弹窗 -->
		<div class="section-kx">
			<!-- 标题 -->
			<div class="title-kx">
				<em>弹窗</em>
			</div>
			
			<!-- 弹窗演示 -->
			<div class="test-box">
				<a href="javascript:void(0);" class="btn-s btn-w140-s0 btn-bg0 test-layer">
					<i class="btn-icon i-ref"></i><em>点击弹窗</em>
				</a>
				<div class="boxys-lay">
					<div class="boxys-layer">
						<div class="layer-title clearfix">
							<em>提示信息</em><span class="boxy-close"></span>
						</div>
						<div class="layer-conts">
							<div class="layer-con">
								<p>注册时即自动开通托管账户，同时进行实名认证并绑定手机号码。是否同意。</p>
							</div>
							<div class="layer-conts-btn">
								<a href="javascript:void(0);" class="btn-box btn-w117-s0 btn-bg0 btn-c30 sure-close">确定</a>
								<a href="javascript:void(0);" class="btn-box btn-w117-s1 btn-bg4 br-b1 btn-c30 un-close">取消</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<!-- 所有弹窗样式 -->
			<div class="lay-list-1">
				<ul class="clearfix">
					<li>
						<!-- 一个按钮 -->
						<!-- <div class="boxys-lay"> -->
							<div class="boxys-layer">
								<div class="layer-title clearfix">
									<em>提示信息</em><span class="boxy-close"></span>
								</div>
								<div class="layer-conts">
									<div class="layer-con">
										<p>注册时即自动开通托管账户，同时进行实名认证并绑定手机号码。是否同意。</p>
									</div>
									<div class="layer-conts-btn">
										<a href="" class="btn-box btn-w117-s0 btn-bg0 btn-c30">确定</a>
									</div>
								</div>
							</div>
						<!-- </div> -->
					</li>
					<li>
						<!-- 对号√ -->
						<!-- <div class="boxys-lay"> -->
							<div class="boxys-layer">
								<div class="layer-title clearfix">
									<em>提示信息</em><span class="boxy-close"></span>
								</div>
								<div class="layer-conts">
									<div class="layer-con">
										<span class="i-right"></span><p>注册时即自动开通托管账户，同时进行实名认证并绑定手机号码。是否同意。</p>
									</div>
								</div>
							</div>
						<!-- </div> -->
					</li>
					<li>
						<!-- 2个按钮 -->
						<!-- <div class="boxys-lay"> -->
							<div class="boxys-layer">
								<div class="layer-title clearfix">
									<em>提示信息</em><span class="boxy-close"></span>
								</div>
								<div class="layer-conts">
									<div class="layer-con">
										<p>注册时即自动开通托管账户，同时进行实名认证并绑定手机号码。是否同意。</p>
									</div>
									<div class="layer-conts-btn">
										<a href="" class="btn-box btn-w117-s0 btn-bg0 btn-c30">确定</a>
										<a href="" class="btn-box btn-w117-s1 btn-bg4 br-b1 btn-c30">取消</a>
									</div>
								</div>
							</div>
						<!-- </div> -->
					</li>
					<li>
						<!-- 错误x -->
						<!-- <div class="boxys-lay"> -->
							<div class="boxys-layer">
								<div class="layer-title clearfix">
									<em>提示信息</em><span class="boxy-close"></span>
								</div>
								<div class="layer-conts">
									<div class="layer-con">
										<span class="i-error"></span><p>注册时即自动开通托管账户，同时进行实名认证并绑定手机号码。是否同意。</p>
									</div>
								</div>
							</div>
						<!-- </div> -->
					</li>
					<li>
						<!-- 进度条 -->
						<!-- <div class="boxys-lay"> -->
							<div class="boxys-layer">
								<div class="layer-title clearfix">
									<em>提示信息</em><span class="boxy-close"></span>
								</div>
								<div class="layer-conts">
									<div class="conts-gif">
										<img src="images/waitpls.gif" alt="" title="" width="290px" />
									</div>
								</div>
							</div>
						<!-- </div> -->
					</li>
					<li>
						<!-- 问号？ -->
						<!-- <div class="boxys-lay"> -->
							<div class="boxys-layer">
								<div class="layer-title clearfix">
									<em>提示信息</em><span class="boxy-close"></span>
								</div>
								<div class="layer-conts">
									<div class="layer-con">
										<span class="i-ask"></span><p>注册时即自动开通托管账户，同时进行实名认证并绑定手机号码。是否同意。</p>
									</div>
								</div>
							</div>
						<!-- </div> -->
					</li>
				</ul>
			</div>
		</div>
		<!-- 表格 -->
		<div class="section-kx">
			<!-- 表格 -->
			<div class="title-kx">
				<em>表格</em>
			</div>
			
			<div class="lay-list-2">
				<!-- 常规表格 -->
				<div class="easy-table">
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<thead>
							<tr>
								<th>名称</th>
								<th>长途运费</th>
								<th>提货费</th>
								<th>送货费 </th>
								<th>保价费</th>
								<th>保价费</th>
								<th>&nbsp;&nbsp;其它费用&nbsp;&nbsp;</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>长途运费</td>
								<td>160</td>
								<td>20</td>
								<td>20</td>
								<td>20</td>
								<td>20</td>
								<td></td>
							</tr>
							<tr>
								<td>长途运费</td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
							</tr>
							<tr>
								<td>长途运费</td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
							</tr>
							<tr>
								<td>长途运费</td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
							</tr>
							<tr>
								<td>长途运费</td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
							</tr>
						</tbody>
						<tfoot>
							<tr rowspan="2">
								<td>运费合计：</td>
								<td colspan="6" class="ft-18-red">￥50000</td>
							</tr>
						</tfoot>
					</table>
				</div>
				
				<!-- 排序表格 -->
				<div class="rank-table">
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<thead>
							<tr>
								<th>
									<div class="inp-check">
										<input type="checkbox" name="" id="" checked="checked">
										<a href="" class="btn-set"></a>
									</div>
								</th>
								<th><em>序号</em></th>
								<th><em>项目名称</em></th>
								<th>
									<em>本月发货量</em>
									<div class="btn-sort">
										<a href="" class="so-top"></a>
										<a href="" class="so-low"></a>
									</div>
								</th>
								<th>
									<em>收入金额</em>
									<div class="btn-sort">
										<a href="" class="so-top"></a>
										<a href="" class="so-low"></a>
									</div>
								</th>
								<th>
									<em>支付金额</em>
									<div class="btn-sort">
										<a href="" class="so-top"></a>
										<a href="" class="so-low"></a>
									</div>
								</th>
								<th>
									<em>&nbsp;&nbsp;&nbsp;备注</em>
									<div class="btn-sort">
										<a href="" class="so-top"></a>
										<a href="" class="so-low"></a>
									</div>
									<em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</em>
								</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>
									<div class="inp-check">
										<input type="checkbox" name="" id="">
										<a href="" class=""></a>
									</div>
								</td>
								<td>1</td>
								<td>列表控制站</td>
								<td>22342</td>
								<td>234</td>
								<td>324</td>
								<td></td>
							</tr>
							<tr>
								<td>
									<div class="inp-check">
										<input type="checkbox" name="" id="">
										<a href="" class=""></a>
									</div>
								</td>
								<td>2</td>
								<td>列表控制站</td>
								<td>22342</td>
								<td>234</td>
								<td>324</td>
								<td></td>
							</tr>
							<tr>
								<td>
									<div class="inp-check">
										<input type="checkbox" name="" id="">
										<a href="" class=""></a>
									</div>
								</td>
								<td>3</td>
								<td>列表控制站</td>
								<td>22342</td>
								<td>234</td>
								<td>324</td>
								<td></td>
							</tr>
							<tr>
								<td>
									<div class="inp-check">
										<input type="checkbox" name="" id="">
										<a href="" class=""></a>
									</div>
								</td>
								<td>3</td>
								<td>列表控制站</td>
								<td>22342</td>
								<td>234</td>
								<td>324</td>
								<td></td>
							</tr>
							<tr>
								<td>
									<div class="inp-check">
										<input type="checkbox" name="" id="">
										<a href="" class=""></a>
									</div>
								</td>
								<td>4</td>
								<td>列表控制站</td>
								<td>22342</td>
								<td>234</td>
								<td>324</td>
								<td></td>
							</tr>
							<tr style="background:#000;">
								<td >
									<div class="inp-check">
										<input type="checkbox" name="" id="">
										<a href="" class=""></a>
									</div>
								</td>
								<td>5</td>
								<td>列表控制站</td>
								<td>22342</td>
								<td>234</td>
								<td>324</td>
								<td></td>
							</tr>
							<tr>
								<td>
									<div class="inp-check">
										<input type="checkbox" name="" id="">
										<a href="" class=""></a>
									</div>
								</td>
								<td>6</td>
								<td>列表控制站</td>
								<td>22342</td>
								<td>234</td>
								<td>324</td>
								<td></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	
<script src="script/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="script/default.js" type="text/javascript"></script>
</body>
</html>